<template>
	<view class="data_minat">
		<view class="main_top">
			<view class="top_list" v-for="(item,index) in wait" :key="index">
				<view class="data_left">
					<view class="name">{{item.company_name}}</view>
					<view class="time">申请时间: {{item.retime}}</view>
					<view class="paravence">{{item.memo || '暂无描述'}}</view>
				</view>
				<view class="data_bntright">
					<view @click="review(item.bind_id, 1)">同意</view>
					<view @click="review(item.bind_id, 2)">拒绝</view>
				</view>
			</view>
		</view>
		<view class="firm_box">
			<view class="firm">
				<view class="firmlist">数据关联企业 <text>{{list.length}}</text></view>
				<view @click="addMore" class="firmright">添加数据关联企业</view>
			</view>
			<view class="supplier" v-for="(item,index) in list" :key="index">
				<view class="supplier_top">
					<view class="supplier_top_left">
						<view>{{item.company_name}}</view>
						<view>关联时间: {{item.retime}}</view>
					</view>
					<view class="supplier_top_right" @click="unlink(item.bind_id)">
						<image src="https://txr001.zthj.net/voucher_img/delicons.png"></image>取消关联
					</view>
				</view>
				<view class="supplierlist">
					<view class="list_left"><image :src="item.logo?item.logo:'https://txr001.zthj.net/static/img/addIMg.png'"></image></view>
					<view class="list_rgiht">{{item.memo || '暂无描述'}}</view>
				</view>
			</view>
			<view class="text-center" v-if="list.length==0">
				<image src="https://txr001.zthj.net/static/img/background.png" class="lgog-img"></image>
				<view class="text-center_no">
					暂无数据
				</view>
			</view>
		</view>
		<u-modal v-model="showmodal" :title="modalTitle" confirm-color="#24458E" @confirm="confirm"  :show-cancel-button="true" :confirm-text="confirmText" :confirm-style="confirmStyle">
		    <view class="slot-content">
		        <view class="modalTitles">{{textData}} </view>
		    </view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                list:[],
                wait:[],
				confirmStyle:{
				    borderLeft:"1px solid #EBEBEB"
				},
				confirmText:"确认",
				showmodal:false,//是否显示弹窗
				modalTitle:"问卷申请",//弹窗标题
				textData:"您有一份来自某某某的问卷，是否接受并与某某某建立链接"//弹窗内容
			}
		},
		onLoad(e) {
            this.load()
        },
        methods:{
            load: async function() {
                let res = await this.$api.association();
                if (!res.code) {
                    this.$u.toast(res.msg);
                    return;
                }
                this.list = res.data.list;
                this.wait = res.data.wait;
            },
             unlink:  function(bind_id){
                let that = this;
                uni.showModal({
                    title: '提醒',
                    content: '是否确认取消关联？',
                    success:  function(res) {
                        if (res.confirm) {
                            that.$api.bindUnlink({bind_id});
                            setTimeout(function(){
                                that.load()
                            },500)
                        }
                    }
                });
            },
            async review(bind_id, status){
                await this.$api.bindReview({
                    bind_id, status
                });
                this.load()
            },
            addMore(){
                uni.navigateTo({
                    url: "/subpackage/pages/mine/addObject"
                })
            }
        }
	}
</script>

<style lang="less" scoped>
	.modalTitles{
	    text-align: center;
	    padding: 43rpx 0 57rpx 0 ;
	    font-size: 35rpx;
	    font-family: PingFang SC, PingFang SC;
	    font-weight: 400;
	    color: #333333;
	    line-height:110rpx;
	    border-bottom: 2rpx solid #EBEBEB;
	}
	.text-center_no{
		color: #767879;
	}
	page{
		background-color: #fff !important;
	}
	.data_minat{
		padding: 16rpx;
		.main_top{
			background: #F3F5FA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding:  0 16rpx;
			.top_list{
				padding:  48rpx 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #D9D9D9;
				.data_left{
					flex: 1;
					overflow: hidden;
					margin-right: 62rpx;
					.name{
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #010101;
						line-height: 38rpx;
						margin-bottom: 4rpx;
					}
					.time{
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #767879;
						line-height: 28rpx;
						margin-bottom: 20rpx;
					}
					.paravence{
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #767879;
						line-height: 28rpx;
					}
				}
				.data_bntright{
					width: 200rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					view{
						width: 96rpx;
						border: 2rpx solid #24458E;
						background: #24458E;
						border-radius: 30rpx 30rpx 30rpx 30rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 56rpx;
						&:last-child{
							background: #fff;
							color: #24458E;
						}
					}
				}
				&:last-child{
					border-bottom: none;
				}
			}
		}
	    .firm_box{
			padding: 16rpx;
			margin-top: 48rpx;
			.firm{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 32rpx;
				margin-bottom: 8rpx;
				border-bottom: 2rpx solid #767879;
				.firmlist{
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #010101;
					line-height: 33rpx;
					display: flex;
					align-items: center;
					text{
						margin-left: 16rpx;
						padding: 0 8rpx;
						height: 28rpx;
						line-height: 28rpx;
						background: #010101;
						border-radius: 17rpx;
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
					}
				}
				.firmright{
					width: 240rpx;
					text-align: center;
					height: 56rpx;
					background: #24458E;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 56rpx;
				}
			}
			.supplier{
				padding: 40rpx 0 ;
				border-bottom: 2rpx solid #D9D9D9;
				.supplier_top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 24rpx;
					.supplier_top_left{
						view{
							&:first-child{
								font-size: 32rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								color: #010101;
								line-height: 38rpx;
								margin-bottom: 4rpx;
							}
							&:last-child{
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								color: #767879;
								line-height: 28rpx;
							}
						}
						
						
					}
					.supplier_top_right{
						display: flex;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #767879;
						line-height: 32rpx;
						image{
							width: 32rpx;
							height: 32rpx;
							margin-right: 8rpx;
						}
					}
				}
				.supplierlist{
					display: flex;
					.list_left{
						width: 120rpx;
						height: 120rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						overflow: hidden;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.list_rgiht{
						flex: 1;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
                        padding-left: 20rpx;
						color: #767879;
						line-height: 28rpx;
					}
					
				}
			}
		}
	}
</style>